<template name="change-bar">
    <view>
        <view class="uni-flex uni-row radio-btn-group-cls" style="justify-content: center;">
            <view v-for="(v,index) in values" :key="index">
                
				<button v-on:click="select(v)" :class="[index===currentindex? 'radio-buttion-cls-sel':'radio-buttion-cls-unsel']">{{v}}</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "change-bar",
        data() {
            return {
              
            }

        },
        computed: {

        },
     
        props: {
            values: {
                type: Array,
            },
            currentindex: {
                type: Number,
                default: 0
            }
        },
        methods: {
            select: function (v) {
                this.selectvalue = v.value;
				this.$emit("value", this.currentindex);
            }

        }
    }
</script>

<style>
    @import "../common/uni.css";
    .radio-buttion-cls-sel {
        border-radius: 0px;
        background: #4CD964;
        width: 300px;
        height: 70px;
        color: #FFFFFF;
        font-size: 35px;
        align-content: center;
        border-style: solid;
        border-color: #1AAD19;
        border-width: 1px;
    }

    .radio-buttion-cls-unsel {
        border-radius: 0px;
        background: #FFFFFF;
        width: 300px;
        height: 70px;
		color: #4CD964;
        font-size: 35px;
        align-content: center;
        border-style: solid;
        border-color: #1AAD19;
        border-width: 1px;
    }
</style>
